安安～我是ChiYu～
昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。
昨天結尾留下的，就是這張同時身兼四職的 Calendar。
圖 1：和昨天結尾是同一個 AI 第一版。單日、區間、時間與行程全部疊在月份格子裡，一次點擊沒有明確任務。
活動日期找它、報名期間找它、預約時段還是找它。這張 Calendar 一口氣兼任日期輸入、挑選日期、瀏覽活動、選擇時間與設定區間，工作量大到只差沒幫它申請加班費。
回頭看原始需求，只有一句：
幫我在活動報名頁加一個 Calendar。
有一說一，AI 沒有做錯。我說要 Calendar，它真的給了 Calendar。只是這句需求完全沒提到使用者要輸入一個確切日期、挑一天、看整月活動、選 09:30，還是設定 8 月 18 日到 8 月 22 日的報名期間。
五個任務都看得到日期，背後卻是五種不同操作。如果只交代「做一個日曆」，AI 最容易生成一張看起來很完整、實際上無法驗收的月曆：過去日期能不能選不知道、選完有沒有套用不知道、開始日和結束日選反了也不知道。
我先打開日期與時間元件比較頁，把這五份工作攤開來看。
圖 2：同樣顯示日期，直接輸入、挑一天、瀏覽行程、選時段與設定區間，是五種不同任務。
在開始背元件名稱前，我先對網站上的 Date Range Picker 做了一次不太友善的操作。
我先選 2026-08-18 當開始日，再故意選一個更早的 2026-08-15 當結束日。這時元件大致有三種反應：
我選第三種。
因為系統不知道使用者點錯的是開始日，還是結束日。自動交換看起來很貼心，實際上可能把錯誤包裝成成功；全部清空更乾脆，順便把使用者剛才做的事一起抹掉。
網站 Demo 會保留兩個值，並顯示：「結束日 2026-08-15 早於開始日 2026-08-18；已保留兩個值，請重新選取開始日後再選結束日。」這才是我想驗收的日期介面：發生錯誤時，畫面要留下證據，也要交代下一步。
這場小事故也讓日期元件的選型變得清楚。重點從來不是月曆長得漂不漂亮，而是使用者正在完成哪一種時間任務。
我會先問使用者是在「提供日期」、「從限制裡選日期」，還是「瀏覽日期上的資料」。接著才處理單日、時間或區間。
圖 3：先從任務判斷元件，而不是看到日期就放 Calendar。
| 使用者要做的事 | 適合的元件 | 先說清楚的規則 |
|---|---|---|
| 直接輸入或貼上一個確切日期 | Date Input | 格式、範例、最早與最晚日期，以及儲存時不能因時區換算而跨日。 |
| 從可用日期中選一天 | Date Picker | 已選、今天、不可選日期，以及選完後的結果。 |
| 瀏覽這個月有什麼活動 | Calendar | 月份切換、活動摘要與今天的位置。 |
| 選擇一天中的時間 | Time Picker | 12/24 小時制、可預約時段與分鐘步進。 |
| 選擇開始與結束日期 | Date Range Picker | 選取順序、封鎖日期、結束不可早於開始、共幾天。 |
如果帶回 LumenDesk 的正式規則，可報名日還只開放週一到週五、預約必須晚於目前時間兩小時，日期區間也不能跨過結算日。這些條件不會因為畫面放了一張月曆就自動成立，仍要逐條寫進選取規則與錯誤回饋。
這五種元件不需要互相搶工作。活動公文上的確切日期交給 Date Input；可報名日期交給 Date Picker；整月活動交給 Calendar；預約時段交給 Time Picker；報名起訖則交給 Date Range Picker。
名稱仍然不是全球統一。許多設計系統會把「日期輸入欄＋跳出的月曆」整組叫 Date Picker，Calendar 也可能同時支援瀏覽與選取。這篇刻意依任務拆成五種，是要讓 AI 知道畫面此刻在收一個值、選一段時間，還是瀏覽整月資料，不是要替所有元件庫重新發身分證。
日期與時間元件完整比較 也保留了可操作版本，可以直接切換畫面確認差異。
Date Input｜日期輸入欄 適合輸入或貼上一個已知日期。LumenDesk 的管理員已經從公文拿到活動日 2026-08-18，這時直接輸入通常比一個月、一個月翻過去更快。
圖 4：Date Input 讓人輸入或貼上確切日期。格式、可用範圍與錯誤規則要在欄位附近。
Date Input 不能只留一個空格，再期待 Placeholder 一肩扛起說明責任。格式 YYYY-MM-DD、輸入範例、最早可用日和錯誤原因，都該出現在欄位附近。
我在 Demo 輸入 2026-08-10，欄位沒有突然失憶，而是保留原值並顯示「活動日期不可早於 2026-08-12」。保留內容很重要，因為使用者只要改其中一段，不必重新猜自己剛才輸入了什麼。
還有一個很容易被畫面藏起來的細節：原生 input type="date" 的值會正規化為 yyyy-mm-dd，顯示格式卻可能隨瀏覽器語系改變。畫面格式與 API 儲存格式不能靠默契，Vibe Coding 時要直接寫進需求。MDN 的 date input 說明
Date Picker｜日期選擇器 適合「我不知道日期數字，但知道想選下週二」的情境。它把可用日期攤開，讓人從限制中挑一天。
圖 5：Date Picker 的重點不是格子，而是已選、不可選與選取後回到欄位的結果。
網站 Demo 中，灰色且帶刪除線的日期代表已過，從 12 日開始才可報名。選到日期後，月曆收合，欄位顯示完整結果。如果畫面只把月曆關掉，使用者還得重新打開確認，等於剛才那一下點得很沒安全感。
自訂日期挑選器也不能把鍵盤留在門外。日期按鈕要能取得焦點；開啟後將焦點帶到合理日期，選定後再回到觸發按鈕。W3C 的範例還處理了按鈕名稱、焦點回復與月份宣告，因為「點得到」只完成滑鼠使用者的版本。WAI-ARIA Date Picker Dialog Example
Calendar｜月曆 處理的是「這個月有什麼」：活動日程、會議排程、預約量與截止日。使用者的注意力在整月資訊，不只在某一個日期值。
圖 6：Calendar 用來瀏覽日程。它需要目前月份、切換月份、今天位置與事件摘要。
一個可用的 Calendar 要能切換月份、辨識今天與有活動的日期，點下日期後還看得到活動摘要。切到下個月時，標題、日期格和事件資料也要一起更新，不能只有月份名稱很努力，內容還停在原地。
如果表單只要選 2026-08-18，常駐一整張月曆反而會佔空間、搶走焦點。這時 Date Picker 或 Date Input 更貼近任務。Calendar 顯示的格子比較多，不代表它自動升級成日期界的萬用工具。
我會把 AI Prompt 寫成：
這個 Calendar 用來瀏覽活動日程，不是表單輸入欄位。要有上個月與下個月按鈕、目前年月、今天與有活動日期的文字摘要；切換月份時，日期格與事件資料都要一起更新。
這段話沒有指定圓角、陰影和配色，卻已經足夠驗收 Calendar 到底會不會工作。
Time Picker｜時間選擇器 負責一天中的時刻。採 12 小時制或 24 小時制、幾點開始營業、一次跳幾分鐘，都會直接改變使用者能選到什麼。
圖 7：Time Picker 要讓人看懂 12／24 小時制、可選時段與分鐘粒度，不能只丟下一個時鐘圖示。
LumenDesk 的預約時間採 24 小時制，營業時間是 09:00 到 18:00，每 15 分鐘一格。我輸入 08:45 時，畫面應保留內容並指出可選範圍；改成 09:30 後，才確認可以預約。
原生 input type="time" 的值使用 24 小時 HH:mm 格式，min、max 與 step 可以描述範圍和秒數步進。不過產品仍要把規則直接說給人看，不能期待每位使用者都先去研究 HTML 規格再填表單。MDN 的 time input 說明
Date Range Picker｜日期區間選擇器 處理報名期間、住宿日期與查詢區間。它不只收兩個日期，還要管理先後順序、區間中的日期、封鎖日與總天數。
圖 8：有效的日期區間同時顯示開始、結束、區間視覺與天數摘要。
網站 Demo 會先收開始日，再收結束日；有效範圍以連續樣式標示，上方同步顯示開始、結束與共幾天。過去日期則直接不可選。
真正需要壓力測試的，還是前面那次反向選取。Vibe Coding 時，我會要求 AI 同時交代三件事：錯誤發生時保留哪些值、訊息要點出哪條規則，以及使用者下一步從哪裡重選。只寫「結束日不能早於開始日」，AI 仍可能自動交換、直接清空，或亮一圈紅框後就下班。
把「幫我加一個 Calendar」改寫後，Prompt 會變成這樣：
為 LumenDesk 的活動管理流程建立日期與時間介面，但不要把它們混成同一個 Calendar：
1. 「活動日期」有一個 Date Input，讓管理員輸入或貼上 YYYY-MM-DD。欄位旁要顯示格式範例；只接受 2026-08-12（含）之後的有效日期。格式錯誤或日期已過時，保留原輸入並說明修正方式。
2. 「報名者選擇活動日期」使用 Date Picker。開啟月曆後，過去日期與週末不可選，只開放週一到週五；已選日期、今天與不可選日期要清楚區分。選取後關閉月曆，欄位顯示完整日期，重設可以回到未選狀態。
3. 「活動日程」使用 Calendar，只負責瀏覽月份和查看有活動的日期。要有上個月、下個月、目前年月、今天與活動數量摘要；切換月份時日期格與事件資料一起更新。
4. 「預約開始時間」使用 Time Picker，採 24 小時制，可選 09:00 到 18:00，每 15 分鐘一格。若預約日是今天，最早只能選台北時間目前時刻兩小時後的下一個可用時段；今天已沒有合格時段時，直接提示改選其他日期。錯誤時間保留內容並顯示可選規則。
5. 「活動報名期間」使用 Date Range Picker。先選開始日再選結束日；2026-08-12 之前不可選，也不得跨過系統提供的結算日。若結束日早於開始日，保留兩個值並說明如何修正。有效區間要顯示開始、結束與含首尾共幾天。
所有日期按鈕與控制都要可用鍵盤操作；不要只用顏色表達已選、不可選或錯誤狀態。
這份 Prompt 沒有要求 AI 把月曆做得更華麗，而是把五種元件的工作、限制、錯誤與重設方式分開。畫面可能沒有第一版那麼「一張月曆包辦全部」的氣勢，但至少每個日期都有地方去。
交付前，我會真的操作五次：輸入格式錯誤的日期、挑一個過去日期、把 Calendar 切到下個月、輸入營業時間外的時段，再選一次結束早於開始的日期區間。
只要其中一次讓我不知道剛才發生什麼、系統替我改了什麼，或下一步該去哪裡修，這個日期介面就還不能算完成。
調整後，管理員可以直接輸入公文上的活動日期，報名者從可用日期挑一天，Calendar 負責瀏覽整月活動，Time Picker 選擇 15 分鐘一格的預約時段，Date Range Picker 再處理報名起訖。
我故意選反日期時，畫面也會保留兩個值、指出規則並告訴我怎麼重選，不會偷偷把資料修成一副什麼事都沒發生的樣子。
日期處理完，我原本以為下一步只剩「上傳海報」。結果海報、參與名單和場地照片一起拖進去後，一份格式錯誤、一份卡在傳送中，還有一份直接失敗。
先看 AI 第一版。入口做得很完整，三份檔案進去之後會發生什麼，畫面選擇先不回答。
圖 9：虛線框、上傳圖示與選檔按鈕都到齊；格式、大小、逐筆狀態、取消、重試與送出前預覽則沒有位置。
明天，我們來看看一個漂亮的 Dropzone，為什麼接不住三份命運完全不同的檔案。
資料查閱：2026-08-07。
iThome鐵人賽
看影片追技術